<template>
  <el-row>
    <el-col :span="24" :xs="0">
      <div class="introduce">
        <img src="@/assets/user/02公司简介/f9f4b4a89daa616d0f94e0ee69abd80f_.png" style="object-fit: contain;width: 100%;height: 100%" alt="">
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="introduce" style="height: 350px">
        <img src="@/assets/user/02公司简介/01.png" style="object-fit: cover;width: 100%;height: 100%" alt="">
        <div style="margin-left: 230px;">
          <div class="introduce-overlay" style="top: 30px;left: 20px;width: 300px">
            <div style="font-size:36px;color: #2841bf;margin-bottom: 20px;font-weight: bold">
              广州市宏意星计算机系统服务有限公司
            </div>
            <div style="font-size: 20px;color: #323232">成熟的支持架构，专业的服务团队，覆盖全国的服务网络</div>
            <div style="font-size: 20px;color: #323232;margin-top: 5px">借鉴国际性企业的先进管理方式，共享支持资源。</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row style="text-align: center">
    <div class="tabs" style="margin: 0 auto;width:300px;justify-content: space-evenly">
        <div class="tab" @click="changeActiveTab2(1)" :class="{active:activeTab===1}">公司简介</div>
        <div class="tab" @click="changeActiveTab2(2)" :class="{active:activeTab===2}">企业文化</div>
        <div class="tab" @click="changeActiveTab2(3)" :class="{active:activeTab===3}">联系我们</div>
    </div>
  </el-row>
  <el-row>
    <el-col :span="24" :xs="0">
      <div class="content" style="width: 63%">
        <div v-html="content"></div>
        <div v-if="showTab1">
          <div style="display: flex;margin: 20px auto 20px auto">
            <div class="container" style="margin-right: 20px">
              <div class="image">
                <img src="@/assets/user/02公司简介/02.png" alt="TT Infrastructure">
              </div>
              <div class="text">
                <div>TT基础构架运行维护</div>
                <ul>
                  <li>• Helpdesk 专业服务(服务台)</li>
                  <li>• 桌面系统软件、硬件维护管理</li>
                  <li>• 网络、服务器运行维护管理</li>
                  <li>• 企业软件、数据库运维管理</li>
                </ul>
              </div>
            </div>
            <div class="container">
              <div class="image">
                <img src="@/assets/user/02公司简介/03.png" alt="TT Infrastructure">
              </div>
              <div class="text">
                <div>IT系统解决方案实施</div>
                <ul>
                  <li>• IT基础架构建设</li>
                  <li>• 网络、存储解决方案</li>
                  <li>• 网络安全解决方案</li>
                  <li>• 云计算方案整体实施</li>
                </ul>
              </div>
            </div>
          </div>
          <div style="display: flex;margin: 0 auto 20px auto">
            <div class="container" style="margin-right: 20px">
              <div class="image">
                <img src="@/assets/user/02公司简介/04.png" alt="TT Infrastructure">
              </div>
              <div class="text">
                <div>项目咨询、ITIL咨询、专业人员外包</div>
                <ul>
                  <li>• 项目实施方案建议</li>
                  <li>• 为企业输送优质人才</li>
                </ul>
              </div>
            </div>
            <div class="container">
              <div class="image">
                <img src="@/assets/user/02公司简介/05.png" alt="TT Infrastructure">
              </div>
              <div class="text">
                <div>移动互联服务</div>
                <ul>
                  <li>• 智能终端嵌入式开发</li>
                  <li>• 智能终端操作系统定制开发</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="card" v-if="showTab3">
          <h1>广州市宏意星计算机系统服务有限公司</h1>
          <p><span>电话：</span>020-87626786</p>
          <p><span>邮编：</span>510030</p>
          <p><span>邮箱：</span>gsscn@gzgamut.com</p>
          <p><span>地址：</span>广州市越秀区解放北路618号8楼802</p>
        </div>
      </div>
    </el-col>
    <el-col :span="0" :xs="24">
      <div class="content">
        <div v-html="content"></div>
      </div>
      <div v-if="showTab1">
        <div class="container2">
          <div class="image">
            <img src="@/assets/user/02公司简介/02.png" alt="TT Infrastructure">
          </div>
          <div class="text">
            <div>TT基础构架运行维护</div>
            <ul>
              <li>• Helpdesk 专业服务(服务台)</li>
              <li>• 桌面系统软件、硬件维护管理</li>
              <li>• 网络、服务器运行维护管理</li>
              <li>• 企业软件、数据库运维管理</li>
            </ul>
          </div>
        </div>
        <div class="container2">
          <div class="image">
            <img src="@/assets/user/02公司简介/03.png" alt="TT Infrastructure">
          </div>
          <div class="text">
            <div>IT系统解决方案实施</div>
            <ul>
              <li>• IT基础架构建设</li>
              <li>• 网络、存储解决方案</li>
              <li>• 网络安全解决方案</li>
              <li>• 云计算方案整体实施</li>
            </ul>
          </div>
        </div>
        <div class="container2">
          <div class="image">
            <img src="@/assets/user/02公司简介/04.png" alt="TT Infrastructure">
          </div>
          <div class="text">
            <div>项目咨询、ITIL咨询、专业人员外包</div>
            <ul>
              <li>• 项目实施方案建议</li>
              <li>• 为企业输送优质人才</li>
            </ul>
          </div>
        </div>
        <div class="container2">
          <div class="image">
            <img src="@/assets/user/02公司简介/05.png" alt="TT Infrastructure">
          </div>
          <div class="text">
            <div>移动互联服务</div>
            <ul>
              <li>• 智能终端嵌入式开发</li>
              <li>• 智能终端操作系统定制开发</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card2" v-if="showTab3">
        <h1>广州市宏意星计算机系统服务有限公司</h1>
        <p><span>电话：</span>020-87626786</p>
        <p><span>邮编：</span>510030</p>
        <p><span>邮箱：</span>gsscn@gzgamut.com</p>
        <p><span>地址：</span>广州市越秀区解放北路618号8楼802</p>
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
import {onMounted, onUpdated, ref, watch} from "vue";
import {getRequest} from "@/util/request.js";
import {Editor} from "@wangeditor/editor-for-vue";
import {useRoute, useRouter} from "vue-router";

let route = useRoute();
let router = useRouter();
let activeTab = ref(parseInt(localStorage.getItem("tab")) || 1);

function changeActiveTab2(index) {
  activeTab.value = index;
  get();
}

let content = ref();
const editorConfig = {
  MENU_CONF: {
    fontSize: {
      fontSizeList: ['12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '21px', '22px', '23px', '24px'],
    },
    uploadImage: {},
    uploadVideo: {}
  },
  readOnly: true
}
let url = {
  get: "/introduce/get",
}
watch(route, (to, from) => {
  router.go(0)
})
let showTab1 = ref(false);
let showTab3 = ref(false);

function get() {
  getRequest(url.get, {type: activeTab.value}).then(res => {
    content.value = res.data;
    showTab1.value = activeTab.value === 1;
    showTab3.value = activeTab.value === 3;
  })
}

get();

</script>

<style scoped>
.introduce-overlay {
  position: absolute;
  color: #333;
}

.tabs {
  height: 60px;
  display: flex;
  letter-spacing: 2px;
  width: 100%;
  margin: 0 auto;

  .tab {
    height: 40px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
  }

  .tab.active {
    color: blue;
    border-bottom: 2px solid blue;
  }
}

.content {
  margin: 0 auto 50px auto;
  letter-spacing: 1px;
}

.card {
  color: #323232;
  margin: 0 auto 100px auto;
  width: 350px;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

.card h1 {
  font-size: 18px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.card p {
  margin: 10px 0;
  line-height: 1.5;
}

.card p span {
  display: inline-block;
  min-width: 60px;
}
.card2 {
  color: #323232;
  margin: 0 auto 100px auto;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

.card2 h1 {
  font-size: 18px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.card2 p {
  margin: 10px 0;
  line-height: 1.5;
}

.card2 p span {
  display: inline-block;
  min-width: 60px;
}

.container {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  width: 550px;
  .image {
    flex: 1;
    height: 100%;
    justify-content: center;
  }

  .image img {
    max-width: 100%;
    height: 100%;
  }

  .text {
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
    color: #323232;
  }

  .text div {
    color: #2e5aac;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .text ul {
    list-style-type: none;
    padding: 0;
  }

  .text ul li {
    margin-bottom: 5px;
    font-size: 16px;
  }
}


.container2 {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  width: 100vw;
  .image {
    flex: 1;
  }

  .image img {
    width: 100vw;
    height: auto;
  }

  .text {
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
    color: #323232;
    padding-bottom: 20px;
  }

  .text div {
    color: #2e5aac;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .text ul {
    list-style-type: none;
    padding: 0;
  }

  .text ul li {
    margin-bottom: 5px;
    font-size: 16px;
  }
}
</style>